<template>
    <div class="Help-container">
        <div class="Help-LeftNavBar">
            
            <div class="Help-LeftNavBar-Nav">
                <a-menu v-model:selectedKeys="current" mode="vertical" :items="items" />
            </div>
        </div>
        <!-- 内容部分111 -->
        <div class="Help-Content">
            <div class="Card">
                <div class="title">联系我们</div>
                <div><img class="Card-img"  src="../assets/dashboardView/help.svg" alt="SVG Image"></div>
            </div>
        </div>
    </div>
</template>

<script lang="js" setup>
import { h, ref } from 'vue';
import SvgIcon from '../components/SvgIcon.vue';
const current = ref(['help']);
const items=[
    {icon:()=>h(SvgIcon,{name:'icon-nav-class'}),
        key:'Dashboard',
        title:'AI课堂',
        label:h('a',
      {
        href: '/dashboard',
        target: '_self',
      },'AI课堂')
    },
    
    {icon:()=>h(SvgIcon,{name:'icon-nav-help'}),
      key:'help',
      title:'帮助',
      label:h('a',
      {
        href: '/help',
        target: '_self',
      },'帮助')
    }
]

</script>

<style lang="scss" scoped>

.Help-container {
    
    box-sizing:border-box; /*把padding 算进整体高度(100vh)中,防止溢出*/
    background: #F6F8F7;
    /*width: 1w;*/  /* 宽度与背景图片大小保持一致 */
    /*height: 100vh;*/  /* 高度与可视窗口高度一致 */
    display: flex;
    width: 100vw; /* 宽度与背景图片大小保持一致 */
    /* height: 1080px; /* 高度与可视窗口高度一致 */
    height: 100vh;
    background-repeat: no-repeat;
    padding: 0 20px 0 0; /* 清除容器的内边距 */
    margin: 0; /* 清除容器的外边距 */
    overflow: auto;
    
}

.Help-LeftNavBar {
    width:88px;
    height: 100%;
    margin: 0;
    background: transparent url('../assets/dashboardView/icon.svg') no-repeat 16px 50px; /* 去掉默认背景色*/
    flex-shrink: 0; /* 防止被挤压遮挡*/
    display: inline-block;
    margin-left: 0; /* 与父元素左边界距离为0 */
    justify-content: center; /* 子元素水平居中 */
}

.Help-LeftNavBar-Icon {
    width: 60px;
    height: 60px;
    margin-left: 12px;
    margin-top: 20px;
}

.Help-LeftNavBar-Nav {
    margin-top: 294px;
    width: 64px;
    margin-left: auto;
    margin-right: auto;
    
    .ant-menu {
        border:0 !important;  /*!important=这个属性权重最高，不会被其他class的样式覆盖 慎用*/
        background: #F6F8F7;
        width: 64px;
        height: 134px;
    }
    /* 使用了 scope+scss后，会导致 无法覆写 组件内部样式的情况出现，需要通过 :deep 前缀才能修改样式 */
    :deep(.ant-menu-item) {
        border-radius: 12px;
        height: 64px; 
        line-height: 24px;
        width: 60px;
        color: #8c8c8c;
        font-family: "PingFang SC";
        font-size: 12px;
        font-style: normal;
        font-weight: 500;
    
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;


        a{/*-10px 抵消掉 父级的 margin-left:10px,让标题居中*/
            margin-left: -10px;
        }
    } 
    :deep(.ant-menu-item-selected) {
        border: 1px solid #EDEDED;
        box-shadow: 0px 2px 2px 0px #F2F2F2, 0px 2px 2px 0px #F2F2F2;
        background-color: #FFF;
        border-radius: 12px;
        height: 64px;
        width: 60px;
        color:#262626;
    }
}



/*右边*/
.Help-Content {
    width: 100%;
    flex:1; /*自适应*/
    height: auto;
    margin-top:20px;
    margin-right: 20px;
    margin-bottom: 20px;
    display: inline-block;
    justify-content: center;
    align-items: center;
    
    border-radius: 12px;
    border: 1px solid #EDEDED;
    background: #FFF;
    box-shadow: 0px 2px 2px 0px #F2F2F2;

    position: relative;
}
.Card {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width:552px;
    height: 320px;
}
.title {
    color: #262626;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: "PingFang SC";
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    }
.Card-img {
    width: 552px;
    height: 256px;
    margin-top: 64px;
}


</style>